<template>
  <div>
    <div>
      <div>
        <el-button :type="active=='qy'?'primary':''" @click="checkTab('qy')">企业主体</el-button>
        <el-button :type="active=='gt'?'primary':''" @click="checkTab('gt')">个体户主体</el-button> 
      </div>
      <div class="box">
        <baidu-map
          class="map"
          center="中国"
          :scroll-wheel-zoom="true"
        >
          <bml-marker-clusterer :averageCenter="true">
            <bm-marker
              v-for="(marker,index) of markers"
              alt="这里显示省"
              title="这里显示省"
              :key="index"
              :position="{lng: marker.lng, lat: marker.lat}"
            >
              <bm-label
                :content="marker.title"
                :position="{lng: marker.lng, lat: marker.lat}"
                class="marker-title"
                :labelStyle="labelStyle"
                :title="marker.title"
              />
            </bm-marker>
          </bml-marker-clusterer>
        </baidu-map>
        <div class="table-box">
          <table class="info-table">
            <tr>
              <td>广东 570+</td>
              <td>广东 570+</td>
              <td>广东 570+</td>
              <td>广东 570+</td>

            </tr>
            <tr>
              <td>广东 570+</td>
              <td>广东 570+</td>
              <td>广东 570+</td>
              <td>广东 570+</td>

            </tr>
            <tr>
              <td>广东 570+</td>
              <td>广东 570+</td>
              <td>广东 570+</td>
              <td>广东 570+</td>

            </tr>
          </table>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { BmlMarkerClusterer } from "vue-baidu-map";

export default {
  components: {
    BmlMarkerClusterer
  },
  data() {
    let markers = [];
    for (let i = 0; i < 100; i++) {
      const position = {
        lng: Math.random() * 40 + 85,
        lat: Math.random() * 30 + 21,
        title: "乱七八糟有限公司"
      };

      markers.push(position);
    }
    return {
      active: "qy",
      markers,
      loading: false,
      hello: "企业地图",
      TMap: null,
      map: null,
      that: null,

      data: [],
      labelStyle: {
        background: "#0076FE",
        color: "#fff",
        padding: "5px 10px",
        borderRadius: "10px",
        borderColor: "#0076fe"
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    drawed() {
      this.loading = false;
    },
    checkTab(tab){
      this.active = tab;
      //查询地图坐标
    }
  }
};
</script>
<style lang="scss">
.map {
  margin: 0 auto;
  width: 1200px;
  height: 400px;
}
.BMap_Marker {
  & > div {
    display: none;
  }
}
.BMapLabel {
  position: relative;
  &::after {
    display: block;
    position: absolute;
    content: "";
    left: 35%;
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0076fe;
  }
}
.table-box {
  width: 100%;
  padding-top: 20px;
  font-weight: 400;
  font-size: 18px;
  line-height: 36px;
  .info-table {
    width: 100%;
    padding: 0;
    text-align: center;
    border-collapse: separate;
    border-spacing: 36px 18px;
    td {
      border-bottom: 1px solid #f0f0f0;
    }
  }
}
.el-tabs__item {
  padding-right: 10px;
  padding-left: 0;
}
.el-tabs__active-bar {
  background-color: rgba(0, 0, 0, 0) !important;
}
.el-tabs__nav-wrap::after {
  display: none;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #e4e7ed;
  z-index: 1;
}
</style>

